<template>
	<!-- 效果图 -->
	<view class="rendering-box">
		<image class="b-img" :src="firstPagePic"></image>
		<view class="list-box">
			<view class="item" v-for="(i,index) in listData" :key="index">
				<image class="img" :src="i"></image>
				<view class="close">
					<image class="close-img" src="../../static/close.png" @tap="listDel(i,index)"></image>
				</view>
			</view>
			<view class="item add" @tap="goAdd()" v-show="listData.length <10">
				<!-- <view class="box">
					<image class="add-img" src="../../static/add.png"></image>
				</view> -->
				<image class="add-img" src="../../static/add_bnt.png"></image>
				<!-- <view class="close">
					添加
				</view> -->
			</view>
		</view>
		<view class="f-bnt">
			<view class="l cc" v-if="detailInfo.userIsCollect == 1">
				已收藏
			</view>
			<view class="l" @tap="sc" v-if="detailInfo.userIsCollect == 2">
				收藏
			</view>
			<view class="r" @tap="openSet">
				下单
				<!-- 下单逻辑 下单要判断用户有没有点过收藏，不然就要提醒他先收藏 -->
				<!-- 点收藏我给你返回subjectId 下单的时候你判断是否有subjectId -->
			</view>
		</view>
		<uni-popup ref="popupOrder" type="bottom">
			<view class="p-content">
				<view class="txt" @tap="getVal(1)">
					自行打印甲片
				</view>
				<view class="txt" @tap="getVal(2)">
					制作穿戴甲
				</view>
				<view class="txt c" @tap="close()">
					取消
				</view>
			</view>
		</uni-popup>
		
		<!--确认下单弹窗(选指甲类型和大小)-->
		<uni-popup ref="popupSize" type="bottom" :is-mask-click="false">
			<TypeSize v-if="tsShow" @saveValue="saveValue"/>
		</uni-popup>
		<!--自定义弹窗-->
		<show-modal :show="isShowModal" 
			@close="closeModal" 
			:title="modalTitle" 
			:content="modalContent"
			:cancelText="modalCancelText"
			:confirmText="modalConfirmText"
			@cancel="bindBtn('cancel')" 
			@confirm="bindBtn('confirm')">
		</show-modal>
		<!--图库还是相册-->
		<uni-popup ref="popupImgs" type="bottom">
			<view class="p-content">
				<view class="txt" @tap="getImgs(1)">
					手机相册
				</view>
				<view class="txt" @tap="getImgs(2)">
					图库图案
				</view>
				<view class="txt c" @tap="getImgs(3)">
					取消
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import TypeSize from '@/components/typeSize'
	import ShowModal from "@/components/showModal.vue"
	import {getShowDetail,getQueryElementByShowId,getQueryGoodsInfo} from "@/api/buyer.js"
	import { userCollectSubject,addUserAddr,getUserAddr,verfiyCode } from '@/api/user.js'
	export default {
		components:{
			TypeSize,
			ShowModal,
		},
		data() {
			return {
				index: 1,
				array: ['直接打印指甲','打印到甲片'],
				listData: [],
				localDada: [],
				def: {},
				isCollectSubject: false,
				tsShow: false,
				isShowModal: false,
				modalTitle: '温馨提示',
				modalContent: '',
				modalCancelText: '取消',
				modalConfirmText: '确定',
				isModalType: '',
				defInfo: '',
				firstPagePic: '',
				detailInfo: {},
				orderElementPic: [],
				subjectId: '',
				def: {},
				detialInfo: {},
				params: {
					orderOrigin: 2,
					subjectId: '',
					showId: ''
				},
				diyUrl: []
			};
		},
		onShow() {
			
		},
		beforeDestroy () {
		    uni.$off('updateData');
		},
		onLoad(ops) {
			let that = this
			uni.$on('updateData',(params) =>{
				console.log('监听到事件来自 updateData ，携带参数为：' + JSON.stringify(params));
				// this.isCollectSubject = false
				this.setImgs(params)
				return
			})
			this.setImgs()
			this.def = ops
			this.defInfo = ops
			this.getDetail()
			this.getQueryGoodsInfoFn()
		},
		methods: {
			changePhone(){
				
			},
			close(){
				this.$refs.popupOrder.close()
			},
			// 商品信息
			getQueryGoodsInfoFn() {
				getQueryGoodsInfo().then((res) => {
					this.params.id = res.id
				})
			},
			// 选中后返回数据
			setImgs(obj){
				let dataImgs = uni.getStorageSync('selectedImgsList') || []
				let arr = []
				let ids = []
				// this.listData = []
				// this.listData = Array.from(new Set([...this.listData,...dataImgs]))
				dataImgs.forEach(ele => {
					let groupImgs = ele.groupImgs
					let groupIds = ele.groupIds
					groupImgs.forEach(c => {
						arr.push(c)
					})
					groupIds.forEach(id => {
						ids.push(id)
					})
				})
				console.log('选中的图案',dataImgs,ids,arr)
				this.listData = Array.from(new Set([...this.listData,...arr]))
				this.orderElementPic = Array.from(new Set([...this.orderElementPic,...ids]))
				// this.listData = [...this.listData,...arr]
				// this.orderElementPic = [...this.orderElementPic,...ids]
				this.localDada = dataImgs
				
				if(obj && obj.flag) {
					this.openOrder()
				}
			},
			bindPickerChange(e){
				console.log(e)
			},
			// 删除选择的图片
			listDel(url,inx){
				this.listData.splice(inx,1)
				this.orderElementPic.splice(inx,1)
				let dataImgs = this.localDada
				dataImgs.forEach(ele => {
					let groupImgs = ele.groupImgs
					let groupIds = ele.groupIds
					let index = groupImgs.indexOf(url); // 判断数组中是否有选中的id,如果有则去掉
					if(index > -1){
						groupImgs.splice(index,1)
						groupIds.splice(index,1)
					}
				})
				// 删除
				this.diyUrl = this.diyUrl.filter(el => el != url)
				console.log('this.diyUrl',this.diyUrl)
				uni.setStorageSync('diyUrlList',this.diyUrl)
				uni.setStorageSync('selectedImgsList',dataImgs)
			},
			goAdd(){
				if(this.listData.length >=10){
					const _this = this
					this.isModalType = 1
					this.isShowModal = true
					// this.modalTitle = '温馨提示'
					this.modalContent = '您好，您的手指位置选择已满，已经可以下单啦'
					this.modalCancelText = '查看'
					this.modalConfirmText = '下单'
					return
				}
				this.$refs.popupImgs.open('bottom')
				return
				uni.navigateTo({
					url: '/pagesC/buyer/add?len=' + this.listData.length
				})
			},
			getImgs(t) {
				this.$refs.popupImgs.close()
				if(t == 1) {
					let that = this;
						setTimeout(() => {
							uni.chooseMedia({
								// count: 1, // 默认9
								sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
								sourceType: ['album'], // 可以指定来源是相册还是相机，默认二者都有
								success: function(res) {
									uni.showLoading({
										title: '图片上传中...'
									})
									res.tempFiles.forEach((ele) => {
										console.log(ele)
										that.uploadPhoto(ele.tempFilePath);
									})
								}
							});
						},600)
				}
				if(t == 2) {
					uni.navigateTo({
						url: '/pagesC/buyer/add?len=' + this.listData.length
					})
				}
			},
			uploadPhoto(tempFilePaths) {
				const that = this
				let token = uni.getStorageSync('token') || ""
				uni.uploadFile({
					url: uni.$baseUrl + '/nailVideo/upload', //开发者服务器 url
					header:{
						// HTTP 请求 Header, header 中不能设置 Referer
						'X-Access-Token': token
					},
					// files: that.imgList,
					filePath: tempFilePaths,//tempFilePaths[0].tempFilePath, // 要上传文件资源的路径
					name: 'pictures', // 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
					formData:{
						// HTTP 请求中其他额外的 form data （即接口需要的其它参数）
						dir: 'diy'
					},
					success(res) {
						let data = res.data ? JSON.parse(res.data) : {}
						console.log('上传成功~~~~', data.result);
						that.diyUrl.push(data.result)
						that.listData.push(data.result)
					},
					fail(err) {
						console.log('失败', err);
						uni.hideLoading();
					},
					complete() {
						console.log('结束');
						uni.hideLoading();
					},
				})
			},
			type(item){
				this.ckIndex = item.id
				// this.getNailSizeFn()
			},
			size(i,index){
				this.sIndex = index
			},
			open(){
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popupSize.open('bottom')
				this.tsShow = true
				this.$refs.popupOrder.close()
			},
			openOrder() {
				this.$refs.popupOrder.open('bottom')
			},
			getVal(t) {
				if(t==1){
					// 去支付
					let payObj = {
						id: this.def.id,
						describ: this.detailInfo.describ,
						unitPrice: this.detailInfo.unitPrice || 3,
						orderElementPic: this.orderElementPic,
						fristPageUrl: this.firstPagePic,
						orderElementPic: this.orderElementPic,
						subjectId: this.subjectId,
						showId: this.def.showId,
						orderOrigin: 2
					}
					uni.setStorageSync('diyUrlList',this.diyUrl)
					uni.setStorageSync('payPrintObj',payObj)
					uni.setStorageSync('orderElementPicLen',this.listData.length)
					this.$refs.popupImgs.close()
					uni.navigateTo({
						url: '/pagesB/pay/printOrderPay?payType=10&id=' + this.detailInfo.id
					})
				}
				if(t==2){
					this.open()
				}
			},
			// 下单
			openSet() {
				if(!this.isCollectSubject){
					this.isModalType = 2
					this.isShowModal = true
					// this.modalTitle = '温馨提示'
					this.modalContent = '您好，先收藏后才可下单'
					this.modalCancelText = '取消'
					this.modalConfirmText = '确定'
					return
				}
				this.isShowModal = false
				this.$refs.popupOrder.open('bottom')
			},
			sc(){
				userCollectSubject({subjectId:this.detailInfo.id,subjectName:this.detailInfo.describ}).then((res) => {
					uni.showToast({title: '收藏成功',icon:""});
					this.isCollectSubject = true
					this.subjectId = res
					this.detailInfo.userIsCollect = 1
				})
			},
			// 回调
			saveValue(obj){
				console.log('关闭回调',obj)
				if(!obj) {
					this.$refs.popupSize.close()
					return
				}
				// if(val) {
				// 	// 记录orderElementPic(旧版)
				// 	uni.setStorageSync('orderElementPic',this.orderElementPic)
				// 	uni.setStorageSync('orderElementPicLen',this.listData.length)
				// 	// uni.navigateTo({
				// 	// 	url: '/pagesA/goods/goodsInfoList?showId=' + this.def.id + '&orderOrigin=' + this.def.orderOrigin + '&subjectId=' + this.subjectId
				// 	// })
					
				// 	this.goPay()
				// }else{
				// 	this.$refs.popupSize.close()
				// }
				
				// this.params.orderOrigin = this.def.orderOrigin
				this.params.subjectId = this.subjectId
				this.params.showId = this.def.id
				this.params.addrId = obj.addrId
				uni.setStorageSync('diyUrlList',this.diyUrl)
				uni.setStorageSync('orderElementPicLen',this.listData.length)
				this.$refs.popupSize.close()
				this.$refs.popupImgs.close()
				uni.navigateTo({
					url: '/pagesB/pay/goodsOrderPay?info=' + encodeURIComponent(JSON.stringify(this.params))
				})
			},
			bindBtn(type){
				console.log(type,'0')
				if(this.isModalType == 1 && type == "confirm") {
					this.openSet()
				}else{
					this.isShowModal = false
				}
			},
			closeModal(){
				this.isShowModal = false
			},
			getDetail(){
				getShowDetail({id:this.defInfo.id}).then((res) => {
					this.firstPagePic = res.firstPagePic
					this.detailInfo = res
					
					// if(res.userIsCollect==1) {
						this.subjectId = res.subjectId
						this.isCollectSubject = true
					// }
				})
				getQueryElementByShowId({id:this.defInfo.id}).then((res) => {
					// this.listData = res
					let ids = []
					let imgs = []
					res.forEach(ele => {
						ids.push(ele.id)
						imgs.push(ele.url)
					})
					this.listData = Array.from(new Set([...this.listData,...imgs]))
					this.orderElementPic = Array.from(new Set([...this.orderElementPic,...ids]))
				})
			},
		}
	}
</script>

<style lang="less" scoped>
.rendering-box{
	margin: 0 32rpx;
	padding-top: 32rpx;
	padding-bottom: 135rpx;
	.b-img{
		width: 686rpx;
		height: 686rpx;
		border-radius: 40rpx;
	}
	.list-box{
		display: flex;
		flex-flow: wrap;
		margin-top: 64rpx;
		.item{
			width: 20%;
			height: 166rpx;
			text-align: center;
			margin-bottom: 60rpx;
		}
		.add{
			font-size: 28rpx;
			color: #666;
			.box{
				width: 90rpx;
				height: 166rpx;
				margin: 0 auto;
				line-height: 182.8rpx;
				border-radius: 48rpx;
				background: #F2DEE9;
				border: 1rpx solid #E4919D;
				text-align: center;
			}
			.add-img{
				// width: 48rpx;
				// height: 48rpx;
				width: 90rpx;
				height: 166rpx;
				border-radius: 25rpx;
			}
			.close{
				width: 90rpx;
				margin: 0 auto;
				margin-top: 5rpx;
			}
		}
		.img{
			width: 90rpx;
			height: 166rpx;
			border-radius: 25rpx;
		}
		.close-img{
			width: 32rpx;
			height: 32rpx;
		}
		.close{
			
		}
	}
	.bnt{
		width: 90%;
		position: fixed;
		left: 50%;
		bottom: 52rpx;
		margin-left: -45%;
		border-radius: 50rpx;
		height: 98rpx;
		line-height: 98rpx;
		background: #E4919D;
		font-size: 36rpx;
		color: #fff;
		text-align: center;
		margin-top: 114rpx;
	}
}
.f-bnt{
	margin: 0 32rpx;
	margin-top: 32rpx;
	position: fixed;
	bottom: 45rpx;
	width: 93%;
	left: 0;
	// background-color: #f3ecef;
	z-index: 9;
	.l,.r{
		width: 44%;
		height: 88rpx;
		border-radius: 44rpx;
		border: 2rpx solid #E4919D;
		font-size: 36rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #E4919D;
		text-align: center;
		line-height: 88rpx;
		display: inline-block;
	}
	.l{
		margin-right: 5%;
		background-color: #f3ecef
	}
	.r{
		background: #E4919D;
		color: #fff;
		margin-left: 5%;
	}
	.cc{
		border-color: #ccc;
		color: #999;
	}
}
.popup-content{
	border-radius: 24rpx;
}
.addr-add-box{
	text-align: center;
	padding: 15rpx;
	font-size: 25rpx;
}
.addr-list{
	padding: 0 20rpx;
	.hed{
		font-size: 30rpx;
		font-weight: bold;
		margin-bottom: 30rpx;
		padding-top: 15rpx;
	}
	.close{
		float: right;
	}
	.xw{
		width: 28rpx;
		height: 28rpx;
	}
	.title{
		font-size: 28rpx;
		color: #333;
	}
	.desc{
		margin-top: 6rpx;
		color: #999;
		font-size: 24rpx;
	}
	padding-top: 20rpx;
	.item{
		margin-bottom: 18rpx;
		border-bottom: 1rpx solid #ccc;
		padding-bottom: 20rpx;
		position: relative;
	}
	.check{
		position: absolute;
		top: 20rpx;
		right: 0;
		width: 35rpx;
		height: 35rpx;
	}
}
.addr-model{
	width: 640rpx;
	min-height: 784rpx;
	border-radius: 24rpx;
	background: #F3ECEF;
	box-shadow: 0px 8rpx 20rpx 0px rgba(235, 141, 167, 0.35);
	// position: absolute;
	// left: 50%;
	// top: 15%;
	// margin-left: -320rpx;
	margin: 0 auto;
	margin-bottom: 50rpx;
	padding: 15rpx;
	.hed{
		font-size: 28rpx;
		color: #AAAAAA;
		margin: 32rpx;
		margin-bottom: 50rpx;
		.close{
			float: right;
		}
		.xw{
			width: 28rpx;
			height: 28rpx;
		}
	}
	.rad{
		width: 29rpx;
		height: 29rpx;
		border: 1rpx solid #AAAAAA;
		display: inline-block;
		border-radius: 50%;
		margin-right: 12rpx;
		position: relative;
		top: 7rpx;
	}
	.v-list{
		margin: 32rpx;
		.item{
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;
			border-bottom: rgba(170, 170, 170, 0.2) 1rpx solid;
			padding-bottom: 30rpx;
			font-size: 24rpx;
		}
		.left-name{
			width: 180rpx;
		}
		.rcont{
			flex: 1;
			text-align: right;
			input,textarea{
				font-size: 25rpx
			}
		}
		.fcode{
			display: flex;
			align-items: center;
		}
		.finput{
			flex: 1;
			margin-right: 50rpx;
		}
		.get-code{
			background-color: #666;
			border-radius: 25rpx;
			color: #fff;
			width: 170rpx;
			text-align: center;
			padding: 12rpx 0;
		}
	}
	.bntx{
		.c,.s{
			display: inline-block;
			width: 50%;
			font-size: 34rpx;
			color: #AAAAAA;
			text-align: center;
			padding: 15rpx 0;
		}
		.s{
			color: #E4919D;
		}
	}
}
.t-bnt{
	width: 320rpx;
	height: 80rpx;
	line-height: 80rpx;
	border-radius: 40rpx;
	background: #E4919D;
	font-size: 28rpx;
	color: #fff;
	text-align: center;
	margin: 45rpx auto;
}
</style>
